<template>
	<view class="park_d">
		<haibao ref="haibao"></haibao>
		<image style="width: 100%;" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/park_header.png" mode="widthFix"></image>
		<view class="flex">
			<image class="tx"  v-if="data.logo&&!data.isErr" @error="data.isErr=true" :src="data.logo" mode="" :lazy-load='true'></image>
			<view v-else class="logo_name">{{ (!data.logo||data.logo.indexOf('.')>-1)? data.company_name.substring(0,4) : data.logo}}</view>
			
			<view class="park_name">{{data.company_name}}</view>
			<!-- <view class="score_r">{{data.score>=100?99:data.score}}</view> -->
		</view>
		<view class="main">
			<view class="tip" v-for="item in data.chain_name.slice(0,5)">{{item}}</view>
			<view class="add">
				<view class="add_l">
					<view class="l_f">
						<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/address.png" mode="widthFix"></image>
						{{data.city_name.join('-')}}
					</view>
					<view class="" >{{data.address}}</view>
				</view>
				
				<view class="add_r">
					<view class="" @click="toMap">
						<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/daohang.png" mode="widthFix" ></image>
						<view class="">导航</view>
					</view>
					<view class="" @click="phone">
						<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/dianhua.png" mode="widthFix" ></image>
						<view class="">电话</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="" v-if="imgList.length>0">
			<view class="title">企业产品</view>
			<view class="right_c">
				<swiper class="image-container" :current="currentIndex" autoplay  circular>
					<swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="index">
						<image :src="item.url" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		
		<view class="" v-if="khList.length>0">
			<view class="d_titla">
				<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/detail/company_d_kh.png" mode=""></image>
				<view class="title_text" >客户</view>
			</view>
			<view class="list_div">
				<view class="list-item" v-for="(item,index) in khList" :key="index">
					<view class="w100 name">{{item.company_name}}</view>
				</view>
			</view>
		
		</view>
		
		<view class="" v-if="cpList.length>0">
			<view class="d_titla">
				<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/detail/company_d_kh.png" mode=""></image>
				<view class="title_text" >供应商</view>
			</view>
			<view class="list_div">
				<view class="list-item" v-for="(item,index) in cpList" :key="index">
					<view class="w100 name">{{item.company_name}}</view>
				</view>
			</view>
	
		</view>

		
		<view class="" v-if="mapList.length>0">
			<view class="d_titla">
				<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/detail/company_d_yt.png" mode=""></image>
				<view class="title_text" >已投城市</view>
			</view>
			<view class="flex_m">
				<view class='item' :class='active==index?"active":""' @click='active=index' v-for="(item,index) in mapList" :key="item.city_id">{{item.city_name+'('+item.data.length+')'}}</view>
			</view>
			<view class="list-item" v-for="(item,index) in mapList[active].data" :key="index">
				<view class="w100 name">{{item.company_name}}</view>
			</view>
		</view>
		
		
		<view class="" >
			<view class="d_titla">
				<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/detail/company_d_jy.png" mode=""></image>
				<view class="title_text" >经营范围</view>
			</view>
			<view class="list-item"><view class="">公司法人</view><view class="">{{data.legal}}</view></view>
			<view class="list-item"><view class="">注册资金</view><view class="">{{data.business.reg_cap}}</view></view>
			<view class="list-item"><view class="">实缴资金</view><view class="">{{data.business.reg_cap_unit}}</view></view>
			<view class="list-item"><view class="">社保人数</view><view class="">{{data.business.insured_number}}人</view></view>
			<view class="list-item"><view class="">所属行业</view><view class="w70 name">{{data.business.industry}}	</view></view>
	
		</view>
		
		<!-- <view class="type_div" v-if="zpList.length>0||yqList.length!=0">
			<view class="type_bg" :class="{type_bg1:type_index==1}"></view>
			<view @click="type_index=item.id" class="type_name" :class="{type_active:type_index==item.id}" v-for="(item,index) in typeListAll" :key="index">{{item.type_name}}</view>
		</view> -->
		<view class="" >
			<view class="d_titla">
				<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/%E8%B5%84%E8%AE%AF.png" mode=""></image>
				<view class="title_text" >最新舆情</view>
			</view>
			<view class="list_div" v-show="type_index==0">
				<view class="list-item" v-for="(item,index) in yqList" :key="index">
					<view class="w100 name">{{item.title}}</view>
				</view>
				<view class="none_sj" v-if="yqList.length==0">暂无数据</view>
			</view>
		</view>
		<bottomDetail :data='data' type='5' :id='identification'></bottomDetail>
		<!-- <open ref="open" @showhaibao='showhaibao'></open> -->
	</view>
</template>

<script>
	import { GetOpinionsList,GetCompanyZhaopinHistory,companyDetail,comDetail,gz,ShareAdd,pl,GetSuCitysList,parklist,GetInvestCityMap }  from '../../utils/api.js'
	import open from '@/components/open/open.vue'
	import bottomDetail from '@/components/bottomDetail.vue'
	import haibao from '@/components/haibao/haibao.vue'
	export default {
		data() {
			return {
				data:{chain_name:'',city_name:[],business:{}},
				plList:[],
				isSc:false,
				isNewRenderDone:true,
				identification:'',
				total:0,
				mapList:[],
				active:0,
				khList:[],
				cpList:[],
				typeListAll:[
					{type_name:'最新舆情',id:0},
					// {type_name:'招聘信息',id:1},
				],
				type_index:0,
				page:1,
				isMore:true,
				height:500,
				imgList:[],
				yqList:[],
				zpList:[],
				isShow:false
			}
		},
		components: {
			haibao,
			open,
			bottomDetail
		}, 
		onShareTimeline() {
			ShareAdd({identification:this.data.identification,type:5,name:this.data.company_name})
			return {
				title: this.data.company_name+' | 投资钟祥',
			}
		},
		onShareAppMessage() {
			ShareAdd({identification:this.data.identification,type:5,name:this.data.company_name})
			return {
				title: this.data.company_name+' | 投资钟祥',
			}
		},
		onLoad(option){
			uni.getSystemInfo({
				success: (res) => {
				  this.height =	res.windowHeight - 150
				}
			});
			this.identification = option.identification || option.scene
			this.getD(this.identification)
			GetInvestCityMap({identification:this.identification}).then(res=>{
				this.mapList=res.data
			})
			comDetail.GetCompanyCustom({identification:this.identification}).then(res=>{
				this.khList = res.data
			})
			comDetail.GetCompanySupply({identification:this.identification}).then(res=>{
				this.cpList = res.data
			})
			GetOpinionsList({identification:this.identification}).then(res=>{
				if(res.data.total==0){
					this.yqList = []
				}else{
					this.yqList = res.data.data
				}
			})
			GetCompanyZhaopinHistory({identification:this.identification}).then(res=>{
				if(res.data.total==0){
					this.zpList = []
				}else{
					this.zpList = res.data.data
				}
			})
		},
		onShow(){
			
		},
		methods: {
			phone(){
				uni.makePhoneCall({
						phoneNumber: this.data.elephone||'400-962-5108' //仅为示例
				});
			},
			open(){
				this.$refs.open.show()
			},
			showhaibao(){
				this.$refs.haibao.show('https://wqq103910.oss-cn-hangzhou.aliyuncs.com/files/3/2021/05/333.jpg')
			},
			getD(identification){
				companyDetail({identification}).then(res=>{
					this.data = res.data
				})
			},
			toMap(){
				uni.openLocation({
					latitude : parseFloat(this.data.lat),
					longitude: parseFloat(this.data.lng),
					name:this.data.company_name,
					address:this.data.address,
					success: function () {
							console.log('success');
					},
					fail : function (err) {
							console.log(err);
					},
				})
			}
		},
		onReachBottom() {
			
		},
	}
</script>

<style lang="scss" scoped>
	.none_sj{
		height: 100px;
		line-height:80px;
		text-align: center;
		font-size: 14px;
		font-weight: bold;
	}
.type_div{
	width: 240px;
	margin: 40px auto 15px;
	background-color: #fafafa;
	height: 32px;
	border-radius: 16px;
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.15), 0 2px 0 #f2f2f2;
	display: flex;
	position: relative;
	.type_name{
		height: 32px;
		line-height: 32px;
		color: #666;
		width: 120px;
		text-align: center;
		position: relative;
		z-index: 1;
		font-size: 15px;
		transition: all 0.3s;
	}
	.type_active{
		color: #fff;
		font-weight: bold;
	}
	.type_bg{
		transition: all 0.3s;
		 position: absolute;
		 left: 0;
		 width: 120px;
		 height: 32px;
		 border-radius: 16px;
		 background: linear-gradient(45deg,#97E6FF,#0091FF);
		 z-index: 0;
	}
	.type_bg1{
		left: 120px;
	}
}
.list_div{
	max-height: 275px;
	overflow: auto;
}
.d_titla{
	width: 100%;
	background: #F4F8FF;
	display: flex;
	align-items: center;
	padding: 10px 14px;
	margin-top: 40px;
	image{
		width: 28px;
		height: 28px;
		margin-right: 12px;
	}
	.title_text{
		font-size: 18px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 700;
		color: #333333;
	}
}
.h40{
	height: 40px;
}
.h66{
	height: 66px;
}
.bottom{
	position: fixed;
	justify-content: space-around;
	align-items: center;
	bottom: 0;
	// width: calc(100% - 20px);
	width:100%;
	// padding: 0 10px;
	height: 54px;
	background: #FFFFFF;
	display: flex;
	z-index: 100;
	box-shadow: 0px -2px 2px #e7e7e7;
	.btn{
		font-size: 18px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		height: 54px;
		line-height: 54px;
		background: linear-gradient(90deg, #FE8E33 0%, #FC5517 100%);
		// border-radius: 23px;
		width: 180px;
	}
	.sc{
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		text-align: center;	
		position: relative;
		// width: ;
		image{
			width: 24px;
			height: 24px;
		}
		.num{
			position: absolute;
			font-size: 12px;
			background-color: red;
			height: 14px;
			line-height: 14px;
			border-radius: 7px;
			padding: 0 4px;
			color: #fff;
			right: -5px;
			top: -5px;
		}
	}
}
.park_d{
	width: 100%;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}
.flex{
	display: flex;
	width: calc(100% - 32px);
	margin-left: 16px;
	margin-bottom: 10px;
	// align-items:flex-end;  
	align-items:center;  
	
	.logo_name{
		height: 40px !important;
		width: 40px !important;
		border-radius: 4px !important;
		text-align: center;
		font-size: 14px !important;
		border-radius: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		background: #0091FF;
		color: #fff;
		margin-right: 10px;
	}
	.tx{
		position: relative;
		width: 48px;
		max-height:48px; 
		// top: -24px;
		margin-right: 6px;
	}
	.level{
		width: 28px;
		height: 16px;
		font-size: 10px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 16px;
		text-align: center;
		background: #0091FF;
		border-radius: 3px;
	}
	.score_r{
		font-size:36px;
		width: 60px;
		text-align: center;
		color: #0091FF;
	}
	.park_name{
		font-size: 18px;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 24px;
		// margin-top: 10px;
		width: calc(100% - 60px);
	}
}
.main{
	width: calc(100% - 32px);
	margin: 0 16px 10px;

	.tip{
		margin-top: 4px;
		height: 20px;
		line-height: 20px;
		padding: 0 3px;
		border-radius: 2px;
		border: 1px solid #0091FF;
		margin-right: 4px;
		display: inline-block;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #0091FF;
	}
	.mj{
		display: flex;
		justify-content: space-between;
		margin: 15px 0;
		.mj_l{
			display: flex;
			border-radius: 14px;
			width: 195px;
			height: 28px;
			background: #F3F3F6;
			justify-content: space-between;
			.l_t{
				width: 76px;
				height: 28px;
				line-height: 28px;
				color: #fff;
				font-size: 14px;
				background: linear-gradient(180deg, #0091FF99 0%, #0091FF 100%);
				border-radius: 14px 0px 14px 14px;	
				text-align: center;
			}
			.num{
				width: 120px;
				font-size: 14px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #666666;
				text-align: center;
				line-height: 28px;
			}
		}
		.mj_r{
			height: 26px;
			line-height: 26px;
			text-align: center;
			background: #FEEEE7;
			border-radius: 14px;
			font-size: 14px;
			font-weight: 400;
			color: #0091FF;
			padding: 0 10px;
		}
	}
	.add{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
	
		.add_l{
			font-size: 14px;
			font-weight: 400;
			width: calc(100% - 70px);
			color: #999;
			.l_f{
				display: flex;
				align-items: center;
				margin-bottom: 6px;
			}
			image{
				width: 24px;
				height: 24px;
				margin-right: 2px;
			}
		}
		.add_r{
			display: flex;
			text-align: center;
			justify-content: space-between;
			min-width: 64px;
			max-width: 64px;
			font-size: 12px;
			font-weight: 400;
			color: #0091FF;
			image{
				width: 18px;
			}
		}
	}
}

.title{
	height: 18px;
	font-size: 18px;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 700;
	color: #333333;
	line-height: 18px;
	margin: 40px 20px 20px 20px;
}
.right_c{
	margin-left: 16px;
	.image-container,.swiper-item{
		height: 88px;
	}
	.swiper-item{
		width: 128px !important;
		height: 88px;
		image{
			width: 121px;
			height: 88px;
			border-radius: 4px;
		}
	}
}
.mt20{
	margin-top: 20px;
}
.main1{
	width: calc(100% - 32px);
	margin: 0 16px 10px;
	.top1{
		display: flex;
		margin-bottom: 4px;
		.t_l{
			width: 12px;
			background: #0091FF;
			font-size: 12px;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			padding: 0 10px;
			min-height: 76px;
		}
		.t_r{
			width: calc(100% - 32px);
			.item{
				height: 28px;
				line-height: 28px;
				text-align: center;
				display: flex;
				font-size: 12px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				view{
					width: 50%;
				}
			}
			.item1{
				height: 76px;
				line-height: 76px;
			} 
			.item:nth-child(odd){
				background: #F0F0F0;
			}
		}
	}
	.orange{
		background: #0091FF !important;
	}
}
.pl_item{
	display: flex;
	margin: 10px 16px;
	width: calc(100% - 32px);
	.tx{
		width: 24px;
		height: 24px;
		margin-right: 10px;
	}
	.r{
		width: calc(100% - 34px);
		padding-bottom:10px;
		border-bottom: 1px solid #E9EBEE;
		.top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
			.name{
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #507DAF;
			}
			.time{
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
		.content{
			padding-top:10px;
			font-size: 16px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}
}
.pl{
		display: flex;
		justify-content: space-between;
		margin-left: 16px;
		width: calc(100% - 32px);
		margin-top: 20px;
		.pl_1{
			font-size: 18px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		.pl_2{
			display: flex;
			align-items: center;
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #0091FF;
			image{
				width: 15px;
				margin-right: 2px;
			}
		}
	}
.v_item{
	margin: 0 16px 20px;
	width: calc(100% - 32px);
	background: #F7F7F6;
	border-radius: 8px;
	height: 90px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.v-title{
		font-size: 18px;
		color: #0091FF;
		font-weight: 800;
		width: 40px;
		padding: 0 14px;
		display: flex;
		align-items: center;
		text-align: center;
	}
	.v-all{
		width: calc(100% - 88px);
		height: 8px;
		border-radius: 4px;
		display: flex;
		margin-right: 10px;
		margin-top: 10px;
		position: relative;
	}
	.color0{
		width: 20%;
		height: 100%;
		background-color: #F6D900;
		border-radius: 5px  0 0 5px;
		position: relative;
		&::after{
			position: absolute;
			content: '弱';
			top: 12px;
			font-size: 12px;
			width: 100%;
			text-align: center;
			color: #555;
		}
	}
	.color1{
		width: 20%;
		height: 100%;
		background: #FCBA00;
		position: relative;
		&::after{
			position: absolute;
			content: '比较弱';
			top: 12px;
			font-size: 12px;
			width: 100%;
			text-align: center;
			color: #555;
		}
	}
	.color2{
		width: 20%;
		height: 100%;
		background: #FD9E00;
		position: relative;
		&::after{
			position: absolute;
			content: '有意愿';
			top: 12px;
			font-size: 12px;
			width: 100%;
			text-align: center;
			color: #555;
		}
	}
	.color3{
		width: 20%;
		height: 100%;
		background: #FC8700;
		position: relative;
		&::after{
			position: absolute;
			content: '比较强烈';
			top: 12px;
			font-size: 12px;
			width: 100%;
			text-align: center;
			color: #555;
		}
	}
	.color4{
		width: 20%;
		background: #FF6F00;
		border-radius:0  5px 5px 0;
		position: relative;
		&::after{
			position: absolute;
			content: '强烈';
			top: 12px;
			font-size: 12px;
			width: 100%;
			text-align: center;
			color: #555;
		}
	}
	.start_0{
		position: absolute;
		top: -16px;
		font-size: 12px;
		left: -4px;
		color: #555;
	}
	.end_100{
		position: absolute;
		top: -16px;
		font-size: 12px;
		right: -4px;
		color: #555;
	}
	.biao{
		position: absolute;
		bottom: 10px;
		left: 0;
	}
}
.v_item1{
	background: none;
	margin: 8px 16px;
	height: 112px;
}
.v_item2{
	background: none;
	margin: 8px 16px;
	height: 150px;
}
.v-title1{
	height: 100%;
	background: #F3F1E9;
	border-radius: 8px;
}
.v-title2{
	height: 100%;
	background: #EEECF4;
	border-radius: 8px;
}
.v-title3{
	height: 100%;
	background: #FFEFD8;
	border-radius: 8px;
}
.v-all1{
	width: calc(100% - 68px);
}
.flex_m{
  width:calc(100% - 28px);
  display: flex;
	flex-wrap: wrap;
	padding: 0 14px;
	margin-top: 10px;
  .item{
    border:#0091FF 1px solid;
    color:#0091FF;
    margin-right: 10px;
    padding: 4px 8px;
    border-radius: 2px;
    margin-bottom: 10px;
		font-size: 12px;
  }
  .active{
    color:#fff;
    background:#0091FF;
  }
}
.list-item{
	font-size: 14px;
	border-bottom: 1px solid #F1F1F1;
	height: 36px;
	line-height: 36px;
	padding: 0 10px 0 34px;
	color: #666;
	position: relative;
	display: flex;
	justify-content: space-between;
	.name{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	&::before{
		position: absolute;
		content: ' ';
		width: 6px;
		height: 6px;
		border-radius: 3px;
		background: #0091FF;
		left: 18px;
		overflow: hidden;
		top: 15px;
	}
}
.navbar {
			/*分类*/
			width: 100%;
			// height: 36px;
			// position: sticky;
			// top: 0;
			z-index: 10;
			background-color: #fff;
			box-shadow: 0 2px 3px 0 rgba($color: #000000, $alpha: .3);
			padding-bottom: 10px;
			scroll-view {
				width: calc(100% - 30px);
				margin: 0 30rpx;
				white-space: nowrap;
				position: relative;
				.item {
					position: relative;
					display: inline-block;
					margin: 4px 12px 0;
					// height: 80rpx;
					text-align: left;
					padding-top: 7rpx;
					//line-height: 80rpx;
					&:first-child {
						margin-left: 10rpx;
					}
					&:after {
						content: '';
						width: 0;
						height: 0;
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						transition: 0.3s;
					}
					.text {
						position: relative;
						width: auto;
						height: auto;
						line-height: auto;
						display: inline-block;
						text {
							font-size: 15px;
							font-weight: bold;
							color: #333;
						}
						image {
							position: absolute;
							top: 16rpx;
							right: -14rpx;
							width: 50rpx;
							height: 50rpx;
							display: none;
						}
					}
				}
				.current {
					&:after {
						width: 50%;
					}
					.text {
						position: relative;
						// padding-bottom: 5px;
						text {
							font-size: 18px;
							font-weight: bold;
							color: #333;
						}
						image {
							display: block;
						}
						&:after {
							content: '';
							bottom: -2px;
							left: 50%;
							transform: translateX(-50%);
							width: 50px;
							height: 10px;
							border-radius: 1px;
							// background-color: #ff9933;
							background: url(https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/t_a.png) no-repeat;
							background-size: 100% 100%;
							position: absolute;
							z-index: -1;
						}
					}
				}
			}
		}
	.nomore{
		height: 60px;
		line-height: 60px;
		text-align: center;
		color: #888;
	}
	.loading{
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		color: #888;
		image{
			width: 32px;
			height: 32px;
			margin-right: 10px;
			animation: zhuan 1.2s linear infinite;
		}
	}
	@keyframes zhuan {
		0% {
			transform: rotate(0deg);
		}
		50% {
			transform: rotate(180deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
	.list_item{
		margin: 10px 15px;
		padding: 15px 15px 5px;
		box-shadow: 0 2px 2px 0 rgba($color: #000000, $alpha: .1);
		border-radius: 4px;
	}
	.flex_info{
		display: flex;
		justify-content: space-between;
		margin-bottom: 6px;
		font-size: 12px;
		color: #666;
		.title_1{
			font-size: 14px;
			color: #333;
			font-weight: 800;
		}
		.num{
			font-size: 16px;
			color: #0091FF
		}
	}
</style>
